<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { usePublicHooks } from './hooks'
import { Plus, Close } from '@element-plus/icons-vue'
import { message } from "@/utils/message";
import AddCoordinate from "@/components/AddCoordinate/index.vue";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    status: 1,
    stationList: [{}],
    note: "",
    stationids: [],
    type: null
  }),
  SelectStatusOptions: [],
  stationOptions: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const SelectStatusOptions = ref(props.SelectStatusOptions);
const stationOptions = ref(props.stationOptions);

// 新增交管坐标
function addCrood(i) {
  newFormInline.value.stationList.splice(i + 1, 0, {})
}

// 删除交管坐标
function DeleteCrood(i) {
  if (newFormInline.value.stationList.length === 1) {
    return message(`最后一条数据不能删除！`, {
      type: "error"
    });
  }
  newFormInline.value.stationList.splice(i, 1)
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="82px">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="交管名称" prop="name">
          <el-input v-model="newFormInline.name" clearable placeholder="请输入交管名称" autofocus/>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="交管状态" prop="status">
          <el-select v-model="newFormInline.status" placeholder="请选择交管状态" style="width:100%">
            <el-option v-for="item in SelectStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="交管类型" prop="type">
          <el-select v-model="newFormInline.type" placeholder="请选择交管类型" style="width:100%">
            <!-- <el-option label="站点交管" :value="0" /> -->
            <el-option label="唯一区域交管" :value="1" />
            <el-option label="巷道区域交管" :value="2" />
            <el-option label="公共区域交管" :value="3" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" v-if="!newFormInline.type">
        <el-form-item label="站点集合" prop="stationids">
          <el-select v-model="newFormInline.stationids" multiple placeholder="请选择站点集合" style="width:100%">
            <el-option v-for="item in stationOptions" :key="item.stationid" :label="item.stationname" :value="item.stationid" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24" v-else>
        <el-form-item label="交管区域" prop="stationList">
          <Add-coordinate :data="newFormInline.stationList"></Add-coordinate>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注" prop="note">
          <el-input v-model="newFormInline.note" clearable placeholder="请输入备注" type="textarea" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
  margin-right: 16px;
}
</style>
